class Cart {
    constructor() {
        this.main = document.querySelector('.main')
        this.ul = document.querySelector('.main-bottom')
        this.allSelect = document.querySelector('.allSelect')
        this.totalNum = document.querySelector('.totalNum')
        this.totalMoney = document.querySelector('.totalMoney')
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init() {
        this.render()
        this.bindHtml()
    }
    render() {
        if (!this.list.length) {
            this.ul.innerHTML = `
            <li class="nullBox">
                <img src="../img/cart.jpg" alt="">
                <a href="../index.html">继续逛</a>
            </li>
             `
        } else {
            this.ul.innerHTML = ""
            this.ul.innerHTML = `
                <li class="ul-top">
                    <span>全选</span>
                    <span>商品</span>
                    <span>单价</span>
                    <span>数量</span>
                    <span>小计</span>
                    <span>操作</span>
                </li>
            `
            this.list.forEach(item => {
                this.ul.innerHTML += `
                <li class="dataBox">
                    <input type="checkbox" class ="select" data-id="${item.goods_id}" ${item.is_select && 'checked'}>
                    <a href="./details.html?id=${item.goods_id}">
                        <img src="${item.img_small_logo}">
                    </a>
                    <b class="title">${item.title}</b>
                    <b class="price">${item.price}</b>
                    <div class="num">
                        <b class="sub" data-id="${item.goods_id}">-</b>
                        <input type="text" value="${item.cart_number}" data-id="${item.goods_id}" class="txt">
                        <b class="add" data-id="${item.goods_id}">+</b>
                    </div>
                    <b class="allPrice">￥${item.cart_number * item.price}</b>
                    <b class="del" data-id="${item.goods_id}">删除</b>
                </li>
                `
            })
        }
        localStorage.setItem('cart', JSON.stringify(this.list))
        this.total()
    }
    bindHtml() {
        this.main.addEventListener('click', (e) => {
            let target = e.target || e.srcElement
            //全选
            if (target.className == 'allSelect') {
                let type = target.checked
                this.list.forEach(item => {
                    item.is_select = type
                })
                this.render()
            }
            //单选,有优化，部分代码在后面
            if (target.className == 'select') {
                let id = target.dataset.id - 0
                let goods = this.list.find(item => { return item.goods_id == id })
                goods.is_select = !goods.is_select
                this.render()
                // this.list.forEach(item=>{
                //     let res = this.list.every(item=>{return item.is_select == true})
                //     if(res){
                //         this.allSelect.checked = true
                //     }else{
                //         this.allSelect.checked = false
                //     }
                // })
               
            }
            //商品数量增加
            if (target.className == 'add') {
                let id = target.dataset.id - 0
                let goods = this.list.find(item => { return item.goods_id == id })
                if (goods.cart_number == goods.goods_number) {
                    alert('亲，我的家底都快被你搬空了')
                    return
                }
                goods.cart_number++
                this.render()
            }

            //减按钮
            if (target.className == 'sub') {
            let id = target.dataset.id - 0
            let goods = this.list.find(item => { return item.goods_id == id })
            if (goods.cart_number == 1) {
                let yn = confirm('老板！买一件吧，可怜可怜我吧。活不下去啦')
                if (yn == true) {
                    goods.cart_number = 2
                } else {
                    goods.cart_number = 1
                }
            }
            if (goods.cart_number <= 0) {
                goods.cart_number = 1
            }
            goods.cart_number--
            this.render()
            }

            // 单个删除按钮
            if (target.className == 'del') {
                let id = target.dataset.id - 0
                let index = this.list.findIndex(item => { return item.goods_id == id })
                this.list.splice(index, 1)
                this.render()
                //判断数组是否为空
                //因为every方法不会对空数组进行判断，会直接返回true
                if (!this.list.length) {
                    this.allSelect.checked = false
                }
                window.totalNum()
            }

            //删除选中
            if (target.className == 'delAll') {
                let data = this.list.filter(item => { return item.is_select == false })
                this.list = data
                this.render()
                if (!this.list.length) {
                    this.allSelect.checked = false
                }
                window.totalNum()
            }
            if(target.nodeName == 'BUTTON'){
                location.href = "./pay.html"
            }
        })
    }
    total() {
        //重新取值
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        let count = 0
        let money = 0
        this.list.forEach(item => {
            if (item.is_select == true) {
                count += item.cart_number
                money += item.cart_number * item.price
            }
            let res = this.list.every(item => { return item.is_select == true })
            if (res) {
                this.allSelect.checked = true
            } else {
                this.allSelect.checked = false
            }
        })
        this.totalNum.innerHTML = count
        this.totalMoney.innerHTML = money
    }
}
new Cart()